<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick" >
      <el-tab-pane label="一般资料" name="first">
        <information class="top" ref="info" :bridgeCardBasicInfo="data.bridgeCardBasicInfo"></information>
      </el-tab-pane>
      <el-tab-pane label="上部结构" name="second">
          <superstructure class="top" ref="super" :bridgeCardSuperStructure="data.bridgeCardSuperStructure"></superstructure>
      </el-tab-pane>
      <el-tab-pane label="下部结构" name="third">
        <substructure class="top" ref="sub" :bridgeCardPier="data.bridgeCardPier" :bridgeCardAbutment="data.bridgeCardAbutment"></substructure>
      </el-tab-pane>
      <el-tab-pane label="附属工程/附挂管线" name="fourth">
      <subsidiary class="top" ref="subs" :bridgeCardAffiliateProject="data.bridgeCardAffiliateProject" :bridgeCardAffiliatePipeline="data.bridgeCardAffiliatePipeline"></subsidiary>
      </el-tab-pane>
    </el-tabs>
    <div class="flex-justify">
      <el-button size="small">取消</el-button>
      <el-button type="primary" size="small" style="margin-left:40px;" @click="save">保存</el-button>
    </div>
  </div>
</template>

<script>
import VuePerfectScrollbar from "vue-perfect-scrollbar";
import information from "./information";
import superstructure from "./superstructure";
import substructure from "./substructure";
import subsidiary from "./subsidiary";
export default {
  props:{
    ownId: {
      type: String
    },
    cardId: {
      type: String
    },
    pId: {
      type:String
    }
  },
  data() {
    return {
      activeName: "first",
      data: {}
    };
  },
  watch: {
    'cardId': {
      handler(val,old) {
        // console.log(val)
        // console.log(old)
        if(val) {
          this.activeName = 'first'
          this.queryBridgeCard()
        }
      }
    }
  },
  components: {
    information,
    superstructure,
    substructure,
    subsidiary
  },
  created() {
    this.queryBridgeCard()
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    queryBridgeCard() {
      let data = {
        ownId: this.ownId,
        cardId: this.cardId,
        pId: this.pId
      }
      this.$api.bridge.queryBridgeCard(data).then(res => {
        if(res.data.success) {
          let data = res.data.data[0]
          if(data.length > 0) {
            this.data = data[0]
            this.data.bridgeCardPier = data[0].bridgeCardSubStructure.bridgeCardPier
            this.data.bridgeCardAbutment = data[0].bridgeCardSubStructure.bridgeCardAbutment
          } else {
            this.data = {
              bridgeCardBasicInfo: {},
              bridgeCardSuperStructure: {},
              bridgeCardPier: {},
              bridgeCardAbutment: {},
              bridgeCardAffiliateProject: {},
              bridgeCardAffiliatePipeline: {}
            }
          }
        }
      })
    },
    save(){
      let bridgeCardBasicInfo = this.$refs.info.emit()
      let bridgeCardSuperStructure = this.$refs.super.emit()
      let bridgeCardPier = this.$refs.sub.emitPier()
      let bridgeCardAbutment = this.$refs.sub.emit()
      let bridgeCardAffiliateProject = this.$refs.subs.emit()
      let bridgeCardAffiliatePipeline = this.$refs.subs.emitPipe()
      let data = {
        ownId: this.ownId,
        cardId: this.cardId,
        bridgeCardBasicInfo: bridgeCardBasicInfo,
        bridgeCardSuperStructure: bridgeCardSuperStructure,
        bridgeCardSubStructure: {
          bridgeCardPier: bridgeCardPier,
          bridgeCardAbutment: bridgeCardAbutment
        },
        bridgeCardAffiliateProject: bridgeCardAffiliateProject,
        bridgeCardAffiliatePipeline: bridgeCardAffiliatePipeline
      }
      if(this.data.id) {
        this.$api.bridge.updateBridgeCardById({...data,id:this.data.id}).then(res => {
          if(res.data.success) {

          }
        })
      } else {
        this.$api.bridge.addBridgeCard(data).then(res => {
          if(res.data.success) {

          }
        })
      }
    },
  },
};
</script>
<style scoped>
.top{
height:60vh;
overflow:scroll
}
.flex-justify{
  display: flex;
  justify-content: center;
  margin-top:20px;
}
</style>
